<template>
  <!--文章内容组件-->
  <div class="article-top">
    <div v-if="loading">正在加载...</div>
    <div v-else class="article-else">
      <div v-if="article" class="article">
        <div class="article-header">
          <p style="text-align:center;padding-top:5px;font-size: 25px">{{ article.title }}</p>
        </div>
        <!-- 使用 v-html 指令渲染包含HTML标记的文章内容 -->
        <div v-html="renderedArticle" class="article-html"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"; //vuex中的辅助函数
import service from "@/utils/service";

export default {
  data() {
    return {
      article: '',//文章
      loading: false,//是否加载

    };
  },
  //计算属性
  computed: {
    ...mapState(["subColumns"]),//从vuex中获取的子栏目
    renderedArticle() {
      //将文章内容解析成 DOM 对象
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.article.content, "text/html");

      // 查找所有图片标签并添加样式
      const images = doc.querySelectorAll("img");
      images.forEach((img) => {
        img.style.maxWidth = "100%"; // 设置最大宽度
        img.style.height = "auto"; // 高度自适应以保持比例
        img.style.objectFit = "cover"; // 保持比例并填充容器
      });

      // 将处理后的 HTML 字符串返回
      return doc.documentElement.innerHTML;
    },

  },
  //监听器
  watch: {
    //当刷新页面时，vuex也会刷新，其中的数据会消失，将重新获取，此时subColumns将变化。这个监听器是为了处理刷新
    subColumns: {
      handler(subColumns) {
        const subColumnPath = this.$route.path;
        const matchingSubColumn = subColumns.find((sub) => {
          return sub.path === subColumnPath;
        });

        if (matchingSubColumn) {
          //根据子栏目的id获取文章
          this.fetchArticleContent(matchingSubColumn.subcolumn_id);
        }
      },
      immediate: true,//确保变化时立即执行一次
    },
    //监听路由变化
    $route: {
      handler(to, form) {
        if (this.subColumns.length > 0) {
          const subColumnPath = to.path;
          const matchingSubColumn = this.subColumns.find((sub) => {
            return sub.path === subColumnPath;
          });

          if (matchingSubColumn) {
            this.fetchArticleContent(matchingSubColumn.subcolumn_id);
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    //根据子栏目id获取文章内容
    async fetchArticleContent(subColumnId) {
      try {
        this.loading = true; // 设置 loading 为 true，表示开始加载
        const apiUrl =
          "/articles/single";
        const response = await service.get(apiUrl, {
          params: {
            subcolumn_id: subColumnId,
          },
        });

        if (response.data.code === 20041) {
          this.article = response.data.data;
          console.log('学院简介文章',this.article)
          //增加文章阅读数
          this.addArticleReadCount(this.article.article_id);
        }

      } catch (error) {
        console.error("API 请求出错:", error);
      } finally {
        this.loading = false; // 设置 loading 为 false，表示加载完成
      }
    },
    //增加文章的阅读数接口
    async addArticleReadCount(article_id) {
      try {

        const apiUrl = "/articles/increaseReadcount";
        const response = await service.put(apiUrl, {
          article_id: article_id
        });

        if (response.data.code === 20031) {
          console.log(response.data.data);
        }
      } catch {
        console.log('增加文章阅读数失败');

      }
    }
  },
};
</script>


<style scoped>
.article {
  width: 1120px;
  min-height: 700px;
  /*border: 1px solid #ccc; !* 添加边框，宽度为1像素，样式为实线，颜色为#ccc *!*/
}

.article-header h1 {
  text-align: center;
  color: #333; /* 设置标题文字颜色为#333，即较浅的颜色 */
}

.article-html {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

</style>

